<!DOCTYPE html>

<!--
        表单中包括：用户名，密码，性别，学历（本科，专科），自我介绍；
        输入完用户名后校验只能是"admin"，否则弹框提示错误
        点击提交执行后执行事件，把自我介绍的内容弹框提示出来；
-->

<html>

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta http-equiv="Cache-Control" content="no-transform" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <meta name="viewport"
            content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>注册用户信息</title>

        <link rel="stylesheet" href="css/mycss.css">
    </head>

<body background="image/bg-blue.jpg">
    <div class="body">
        <form class="form">
            <header>注册用户信息</header>
            <fieldset>
                <!-- 用户名输入框和密码输入框 -->
                <section>
                    <label class="label">用户名：</label>
                    <label class="input">
                        <!-- 默认启动页面后获得焦点，且为必填项 -->
                        <input type="text" id="username" autofocus required onblur="ablecheck">
                    </label>
                </section>
                <section>
                    <label class="label">密码：</label>
                    <label class="input">
                        <!-- 密码格式，必填项 -->
                        <input type="password" id="passwd" required>
                    </label>
                </section>

            </fieldset>

            <fieldset>
                <section>
                    <!-- 性别单选框 -->
                    <label class="label">性别：</label>
                    <div class="inline-group">
                        <label class="radio"><input type="radio" name="radio-inline"
                                checked="checked"><i></i>男🚹</label>
                        <label class="radio"><input type="radio" name="radio-inline"><i></i>女🚺</label>
                    </div>
                </section>
            </fieldset>

            <fieldset>
                <section>
                    <!-- 学历下拉框 -->
                    <label class="label">学历：</label>
                    <label class="select">
                        <select id="education" required>
                            <!-- 默认显示“请选择学历” -->
                            <option value="0" selected disabled hidden>请选择学历</option>
                            <option value="1">本科</option>
                            <option value="2">专科</option>
                        </select>
                    </label>
                </section>
            </fieldset>

            <fieldset>
                <section>
                    <label class="label">自我介绍：</label>
                    <label class="textarea">
                        <textarea rows="3" id="self-introduce" required></textarea>
                    </label>
                </section>
            </fieldset>

            <!-- 两个按钮，分别用于提交和重置用户填入的数据 -->
            <fieldset>
                <button class="button" onclick="submitter()" id="submit">提交</button>
                <button type="reset" class="button" id="reset">重置</button>
            </fieldset>

            <script>
                var imag = ["black", "blue", "cyan", "green", "orange", "pink", "purple", "red", "yellow"];
                function changeimage() {
                    var i = 9 * Math.random();
                    i = Math.floor(i);
                    document.body.style.backgroundImage = 'url(image/bg-' + imag[i] + '.jpg)'
                }
                setInterval(changeimage, 1000);

                //提交函数，用于检查用户填入数据
                function submitter() {
                    //判断用户名、密码以及自我介绍的内容是否为空，学历是否选择
                    if (document.getElementById("username").value == "") {
                        return;
                    }
                    if (document.getElementById("passwd").value == "") {
                        return;
                    }
                    if (document.getElementById("self-introduce").value == "") {
                        return;
                    }
                    if (document.getElementById("username").value != "admin") {
                        alert("用户名错误，请重新输入！");
                        return;
                    } else {
                        alert(document.getElementById("self-introduce").value);
                        reset();
                    }
                }
                //ablecheck
                function ablecheck() {
                    if (document.getElementById("username").value != "") {
                        var x = document.getElementById("reset").removeAttr("disabled");
                    }
                }
                //重置函数，清空表单数据后刷新页面
                function reset() {
                    localStorage.reset();
                }
            </script>
        </form>
    </div>
</body>

</html>